<template>
  <a-modal
    :visible='visible'
    fullscreen
    @cancel='closeModal'
    @ok='closeModal'
  >
    <template #title>
      <img style='width: 30px;margin-right: 10px;border-radius: 20px' src='https://img.alicdn.com/tps/i3/T1OjaVFl4dXXa.JOZB-114-114.png' alt='logo'>
      <span>短链详情</span>
    </template>
    <a-row>
      <a-col :span='16'>
        <BaseShortLinkInfo/>
      </a-col>
      <a-col :span='8' align='center'>
        <QRCode url='https://gitee.com/tiantian17' />
      </a-col>
    </a-row>
    <a-row align='center'>
      <a-col :span="12">
        <AccessCurve/>
      </a-col>
      <a-col :span="12">
        <Pv24h/>
      </a-col>
    </a-row>
    <a-row align='center'>
      <a-col :span="8">
        <Day7Distribution/>
      </a-col>
      <a-col :span="5">
        <RingGraph/>
      </a-col>
      <a-col :span="5">
        <RingGraph :chart-name='"操作系统"'
                   :chart-data="ringGraphData"
                   :chart-info='["Windows", "MacOS"]'/>
      </a-col>
      <a-col :span="6">
        <HighFrequencyIp/>
      </a-col>
    </a-row>
  <!--  高频访问ip-->
  </a-modal>
</template>

<script setup>

import { defineEmits } from 'vue';
import QRCode from '@/views/list/search-table/components/chartsInfo/QRCode.vue';
import Pv24h from '@/views/list/search-table/components/chartsInfo/pv24h.vue';
import AccessCurve from '@/views/list/search-table/components/chartsInfo/AccessCurve.vue';
import BaseShortLinkInfo from '@/views/list/search-table/components/chartsInfo/BaseShortLinkInfo.vue';
import RingGraph from '@/views/list/search-table/components/chartsInfo/RingGraph.vue';
import Day7Distribution from '@/views/list/search-table/components/chartsInfo/Day7Distribution.vue';
import HighFrequencyIp from '@/views/list/search-table/components/chartsInfo/HighFrequencyIp.vue';

const emit = defineEmits(['closeModal']);

const props = defineProps({
  visible: Boolean,
  title: Boolean,
  fullShortUrl: String,
  gid: String,
  startDate: String,
  endDate: String
});

const ringGraphData = [{value: [3],
  name: 'Windows',
  itemStyle: {
    color: '#468DFF',
  },
},
  {
    value: [1],
    name: 'MacOS',
    itemStyle: {
      color: '#93F576',
    },
  }]

const closeModal = () => {
  emit('closeModal');
};

</script>

<style scoped>

</style>